<script setup>
import TopButtonCenter from "@/components/Pengyq/TopButtonCenter.vue";
import { onMounted, ref } from "vue";
import { requestOrder, requestApprove } from "@/server/api/profile";
import { useUseStore } from "@/stores/user.js";
import { useRoute } from "vue-router";

const orderId = ref("");
const route = useRoute();
const useStore = useUseStore();
const point_amount = route.query.point_amount;
let payAmount = ref((point_amount / 7 + 0.044 * point_amount + 0.3).toFixed(2));
console.log("query:", point_amount);
const getRecord = async () => {
  console.log("1223");
  const res = await requestOrder();
  console.log("res:", res.data.id);
};
const money = ref(2);
onMounted(() => {
  paypal
    .Buttons({
      style: {
        size: "small",
        // layout: 'horizontal',
        color: "gold",
        shape: "pill",
        label: "paypal",
      },

      createOrder: async function (data, actions) {
        console.log("createOrder");
        const res = await requestOrder({
          userId: useStore.userId || "1f609200-e4bb-4daf-8402-b6a3d30c671f",
          buyPointBalance: point_amount,
          payPalMoney: payAmount,
        });
        orderId.value = res.data.id;
        return res.data.id;
      },
      payment: async function (data, actions) {
        console.log("payment");
        const res = await requestOrder();
        return res.data.id;
      },
      onApprove: async function () {
        console.log("onApprove");
        const res = await requestApprove(orderId.value);
        console.log("approve:", res);
      },

      onAuthorize: function (data, actions) {
        return actions.payment.execute().then(function (payment) {
          console.log("onAuthorize");
        });
      },
      onCancel: function (data, actions) {
        console.log("onCancel...");
      },

      onError: function (err) {
        console.log("onError...");
      },
    })
    .render("#paypal-button");
});
</script>
<template>
  <div class="container">
    <top-button-center title="paypal checkout" style="background-color: transparent" />
    <div class="buy-credit">
      <div class="title">购买积分</div>
      <div class="momey">{{ point_amount }}</div>
    </div>
    <div class="total">
      <div class="title">{{ $t("cart.total") }}</div>
      <div class="momey">{{ payAmount }} <span class="unit">USB</span></div>
    </div>
    <!-- <button class="btn" @click="getRecord">发送请求</button> -->
    <div id="paypal-button"></div>
    <!-- <div class="input-box">
            <input type="text" v-model="money">
        </div> -->
  </div>
</template>
<style lang="scss" scoped>
.container {
  box-sizing: border-box;
  padding: 10rem 10rem;
  height: 100vh;

  background-color: #f5f5f5;

  .buy-credit {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20rem 20rem;
    border-radius: 8rem;
    margin-top: 100rem;
    margin-bottom: 20rem;
    font-size: 16rem;
    background-color: #fff;
  }

  .total {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20rem 20rem;
    border-radius: 8rem;
    margin-bottom: 100rem;
    font-size: 16rem;
    background-color: #fff;

    .unit {
      margin-left: 10rem;
    }
  }

  .checkout-btn {
    margin-top: 100rem;
  }

  .btn {
    padding: 4rem 6rem;
    margin-bottom: 20rem;
  }

  .input-box {
    margin-top: 20rem;
    font-size: 14rem;

    input {
      padding-left: 10rem;
      border-bottom: 1rem solid #e5e5e5;
      // background-color: burlywood;
    }
  }
}
</style>
